<template>
  <div class="echart-part">
    <echart-title :title="para.title"></echart-title>
    <div :id="para.id" class="echart_content">

    </div>
  </div>
</template>

<script>
import echartTitle from "../common/echart-title";
import {echartsOption} from "./echarts-option";
import {data} from "./date";
const echarts = require('echarts')


let myChart

export default {
  name: 'num-count-proportion',
  props: {
    para: {}
  },
  components: {
    echartTitle
  },
  data() {
    return {
      timer: '',
      data: [],
      des: [],
    }
  },
  mounted() {
    this.getData()
  },
  watch: {
  },
  beforeDestroy() {
    if (this.timer) { // 如果定时器还在运行 或者直接关闭，不用判断
      clearInterval(this.timer) // 关闭
    }
  },

  methods: {
    getData() {
      let me=this

      me.data=[1,1,1,1]
      me.draw()

      // this.setEchartOption(res.xAxisData,res.dataFirs,res.dataSec)

    },
    setEchartOption(xAxisDataNew,dataFirstNew,dataSecNew){
      myChart.setOption(
        { xAxis:{
            data:xAxisDataNew
          },
          series: [
            {
              data: dataFirstNew
            },{
              data: dataSecNew
            }
          ]
        }
      )
    },

    draw() {
      let div = document.getElementById(this.para.id)
      if (!myChart || !div.innerHTML) {
        myChart = echarts.init(document.getElementById(this.para.id))
      }
      myChart.setOption(echartsOption)
      window.addEventListener("resize", () => myChart.resize(), false);
    },

  }
}
</script>

<style scoped>
.mybackground {
  background: rgba(17, 35, 60, 0.50);
  border-radius: 10px;
}

.myflex {
  display: flex;
  justify-content: space-around;
  align-content: center;
}

.myimg {
  height: 154px;
}

.myfont {
  font-family: PingFangSC-Medium;
  font-size: 14px;
  color: #008AD9;
  line-height: 20px;
  font-weight: 500;
}

.myfont2 {
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #58BFF9;
  text-align: center;
  line-height: 12px;
  font-weight: 400;
}

.myposition {
  text-align: center;
  width: 100px;
  position: absolute;
  left: 50%;
  margin-left: -50px;
}
</style>
